// 页面色调配置样式文件
$main_color:#FF3E3E;
$main_gra:linear-gradient(150deg, #2BA245 28%, #1C9637 85%);

$color_E73535:#E73535;
$color_598DF4:#598DF4;
$color_1A66FF:#1A66FF;
$color_50D7B8:#50D7B8;
$color_71C2F6:#71C2F6;
$color_F22F5C:#F22F5C;

$color_191919:#191919;
$color_606266:#606266;
$color_b0b0b0:#b0b0b0;
$color_F5F5F5:#F5F5F5;

$color_333:#333;
$color_666:#666;
$color_999:#999;
$color_000:#000;
$color_fff:#fff;

//主色16px加粗式标题文字
@mixin main-font-bold{
	font-size: 16px;
	font-weight: bold;
	color: $main_font_color;
}

//页面12px边距
@mixin body-padding-12{
	padding-left:12px;
	padding-right: 12px;
}

@mixin width-height($num){
	width: $num;
	height: $num;
}
@mixin w-h($num){
	width: $num;
	height: $num;
}

@mixin width-height-full{
	width: 100%;
	height: 100%;
}
@mixin w-h-f{
	width: 100%;
	height: 100%;
}
@mixin main-color-14{
	font-size: 14px;
	color: $main_font_color;
}

// flex布局	$d:row,$w:nowrap,$s:space-between,$a:center
@mixin flex-style($direction:row,$wrap:nowrap,$content:space-between,$items:center){
	display: flex;
	flex-direction:$direction;
	flex-wrap:$wrap;
	justify-content:$content;
	align-items:$items;
}

@mixin flex-style-inline($direction:row,$wrap:nowrap,$content:space-between,$items:center){
	display: inline-flex;
	flex-direction:$direction;
	flex-wrap:$wrap;
	justify-content:$content;
	align-items:$items;
}

//grid布局
@mixin grid-style($columns,$rows,$gap,$flow){
	display: grid;
	grid-template-columns: repeat($columns); /* 相当于 1fr 1fr 1fr */
	grid-template-rows: repeat($rows); /* fr单位可以将容器分为几等份 */
	grid-gap:$gap; /* grid-column-gap 和 grid-row-gap的简写 */
	grid-auto-flow: $flow;
}



//boxsizing
@mixin boxsizing{
	box-sizing: border-box;
}


//单文本缩略
@mixin single-text($width){
	width: $width;
	white-space: nowrap;
	overflow: hidden;
	text-overflow:ellipsis;
}

@mixin multi-text-app ($clamp) {
	overflow: hidden;
	text-overflow: ellipsis;
	lines: $clamp;
	height: auto;
}

//多文本缩略
@mixin multi-text ($height,$clamp){
	// -webkit-line-clamp:$clamp;
	height: $height;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	/*! autoprefixer: off */
	-webkit-box-orient: vertical;
}

//文本两端对齐
@mixin text-justify {
    text-align: justify;
    text-justify: distribute-all-lines;
    text-align-last: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
}


@mixin scroll-bar-style($width,$height,$trackcolor,$thumbcolor) {
    &::-webkit-scrollbar {
        width: $width;
        height: $height;
        cursor: pointer;
    }
    &::-webkit-scrollbar-track {
        background: $trackcolor;
    }
    &::-webkit-scrollbar-thumb {
        background: $thumbcolor;
        // border-radius:10px;
    }
}

//预留
// 按钮盒阴影
@mixin btn-shadow {
	box-shadow: 2px 2px 5px #BABECC, -5px -5px 10px #fff;
}
// 条状模块盒阴影
@mixin lineBar-shadow {
	box-shadow: 2px 2px 5px #BABECC, -5px -5px 10px #fff;
}
// large-box盒阴影
@mixin largeBox-shadow {
	box-shadow: 2px 2px 5px #BABECC, -5px -5px 10px #fff;
}
// 标签盒阴影
@mixin tags-shadow {
	box-shadow: 2px 2px 5px #BABECC, -5px -5px 10px #fff;
}

// 父元素flex并且子元素可以横向滚动,设置父元素的宽度
// 设置子元素flex: 0 0 auto;并给宽度